<template>
  <div>
    <Nav></Nav>
    <v-title>购物车</v-title>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>我的购物车</h2>
      </el-col>
    </el-row>
    <el-row class="cart">
      <div v-if="cartInfo.cartGoodsVo.length > 0">
        <div>
          <div>
            <el-card class="box-card">
              <div class="text item">
                <div v-for="(cartInfo, key) in cartInfo.cartGoodsVo" v-bind:key="key">
                  <el-row>
                    <el-col :span="6"><img :src="cartInfo.gameGoods.mainPicUrl" width="250" height="192" /></el-col>
                    <el-col :span="14" :offset="4">
                      <el-row>
                        <router-link :to="`/gameGoodsDetail/${cartInfo.gameGoods.id}`">
                          {{cartInfo.gameGoods.name}}
                        </router-link>
                      </el-row>
                      <br />
                      <el-row>
                        <el-col :span="4">
                          <span class="detailContent">价格</span>
                        </el-col>
                        <el-col :span="6">
                          <span class="detailContentPrice">￥{{cartInfo.gameGoods.price}}</span>
                        </el-col>
                      </el-row>
                      <br />
                      <el-row>
                        <el-col :span="4">
                          <span class="detailContent">数量</span>
                        </el-col>
                        <el-col :span="6">
                          <span>
                            <el-input-number v-model="cartInfo.num"
                              @change="changeNum(cartInfo.gameGoods.id, cartInfo.num)" :min="1" label="下单数量" :step="1"
                              size="mini" />
                          </span>
                        </el-col>
                      </el-row>
                      <br />
                      <el-row>
                        <el-col :span="4">
                          <el-col :md="24">
                            <el-button type="danger" round @click="removeGoods(cartInfo.id)">移除该商品~</el-button>
                          </el-col>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-divider />
                </div>
              </div>
              <el-row>
                <el-col :span="2" :offset="18">
                  总价：
                </el-col>
                <el-col :span="4">
                  <span class="detailContentPrice">￥{{cartInfo.money}}</span>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :offset="19">
                  <el-col :md="24">
                    <el-button type="success" round @click="takeOrder">下单~</el-button>
                  </el-col>
                </el-col>

              </el-row>
            </el-card>
            <br /><br />
          </div>
        </div>
        <el-backtop />
        <el-divider>亲~已经看到底了吖~</el-divider>
      </div>
      <div v-else>
        <el-result title="购物车没有任何东西..." subTitle="目前购物车空空如也~可以去游戏商城看看吖~">
          <template slot="icon">
            <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px"/>
          </template>
          <template slot="extra">
            <router-link to='/gameGoods'><el-button type="primary" size="medium">去康康~</el-button></router-link>
          </template>
        </el-result>
      </div>
    </el-row>
    <br />
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getCartInfo, updateCartInfo, deleteCartInfo } from "@/api/index";
export default {
  created() {
    this.getCartInfo()
  },
  components: {
    Nav,
    VTitle,
  },
  data() {
    return {
      cartInfo: {
        cartGoodsVo: []
      },
      deleteGoodsIds: []
    };
  },
  methods: {
    async getCartInfo() {
      let that = this;
      await getCartInfo().then((res) => {
        if (res.code == "200") {
          if (res.data != null) {
            that.cartInfo = res.data;
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async changeNum(goodsId, num) {
      let that = this;
      let data = {
        gameGoodsId: goodsId,
        num,
        type: 2
      }
      await updateCartInfo(data).then(async (res) => {
        if (res.code == "200") {
          // 总价显示优化
          await getCartInfo(data).then((res) => {
            if (res.code == "200") {
              that.cartInfo.money = res.data.money
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async removeGoods(cartId) {
      let that = this;
      // 弹窗提示
      this.$confirm('此操作将移除该商品, 是否继续?', '警告', {
        confirmButtonText: '确定移除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 开始请求
        that.deleteGoodsIds.push(cartId);
        let cartIds = that.deleteGoodsIds;
        await deleteCartInfo(cartIds).then(async (res) => {
          if (res.code == "200") {
            this.$message.success('移除该商品成功~');
            // 再次刷新购物车信息
            await getCartInfo().then((res) => {
              if (res.code == "200") {
                if (res.data != null) {
                  that.cartInfo = res.data;
                }
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            this.$message.error(res.msg);
          }
        });
      }).catch(() => {

      });
    },
    async takeOrder() {
      await getCartInfo().then((res) => {
        if (res.code == "200") {
          if (res.data.cartGoodsVo.length > 0) {
            this.$router.push("/createOrderStep1");
            return;
          }
          this.$message.error('当前购物车没有东西吖~不能跳转到创建订单页面~');
        } else {
          this.$message.error(res.msg);
        }
      });
      
    }
  }
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.el-input {
  width: 25%;
}

.cart {
  width: 50%;
  margin-left: 25%;
}

a {
  font-size: 25px;
  color: #2abaca;
  font-weight: bolder;
}

.old-name {
  color: #000;
}

.detailContent {
  font-size: 12px;
  line-height: 20px;
  display: block;
  color: #9497a0;
}

.detailContentPrice {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: red;
  font-weight: bold;
}

.detailContentNum {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: black;
  font-weight: bold;
}
</style>